<template>
  <div class="_wz_cent_main">
    <div id="container" style="width:100%;height:100%;">

    </div>
  </div>
</template>
<script>


import { mapState, mapActions } from 'vuex'
export default {
  components: {},
  props: [],//接收来自父组件的数据
  data() {
    return {}
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    this.aa();

  },
  methods: {//执行的方法
    aa(){
      let that = this;

      let wzData = {
        nodes:[
          { id: '1', name: '问题发布',pid:['0']},
          { id: '2', name: '问题审核',pid:['1']},
          { id: '3', name: '批示交办',pid:['2']},

          { id: '4', name: '襄都区',pid:['3']},
          { id: '5', name: '任务接班',pid:['4']},
          { id: '6', name: '任务拆分',pid:['5']},

          { id: '7', name: '任务1接受',pid:['6']},
          { id: '8', name: '任务1办理',pid:['7']},
          { id: '9', name: '任务1审核',pid:['8']},
          { id: '10', name: '任务1上报',pid:['9']},

          { id: '11', name: '任务2接受',pid:["6"]},
          { id: '12', name: '任务2办理',pid:["11"]},
          { id: '13', name: '任务2审核',pid:["12"]},
          { id: '14', name: '任务2上报',pid:["13"]},

          { id: '15', name: '任务3接受',pid:["6"]},
          { id: '16', name: '任务3办理',pid:["15"]},
          { id: '17', name: '任务3审核',pid:["16"]},
          { id: '18', name: '任务3上报',pid:["17"]},

          { id: '19', name: '信都区',pid:['3']},
          { id: '20', name: '任务接班',pid:['19']},
          { id: '21', name: '任务拆分',pid:['20']},

          { id: '22', name: '任务1接受',pid:['21']},
          { id: '23', name: '任务1办理',pid:['22']},
          { id: '24', name: '任务1审核',pid:['23']},
          { id: '25', name: '任务1上报',pid:['24']},

          { id: '26', name: '任务2接受',pid:["21"]},
          { id: '27', name: '任务2办理',pid:["26"]},
          { id: '28', name: '任务2审核',pid:["27"]},
          { id: '29', name: '任务2上报',pid:["28"]},


          { id: '34', name: '问题复审',pid:["10","14","18","25","29"]},
          { id: '35', name: '问题归档',pid:["34"]},

        ],
        edges:[]
      }

      wzData.nodes.forEach((k,i)=>{
        k.pid.forEach((ko,io)=>{
          if(!!ko){
            wzData.edges.push( { source: ko, target:  k.id, })
          }
        })
      })


      //
      // const data = {
      //   nodes: [
      //     { id: '1', name: '问题发布',pid:0},
      //     { id: '2', name: 'alps_file2'},
      //     { id: '3', name: 'alps_file3'},
      //     { id: '4', name: 'sql_file1'},
      //     { id: '5', name: 'sql_file2'},
      //     { id: '6', name: 'feature_etl_1'},
      //     { id: '7', name: 'feature_etl_1'},
      //     { id: '8', name: 'feature_extractor'},
      //   ],
      //   edges: [
      //     { source: '1', target: '2', },
      //     { source: '1', target: '3', },
      //     { source: '2', target: '4', },
      //     { source: '3', target: '4', },
      //     { source: '4', target: '5', },
      //     { source: '5', target: '6', },
      //     { source: '6', target: '7', },
      //     { source: '6', target: '8', },
      //   ],
      // };


      // that.G6.registerNode(
      //   'sql',
      //   {
      //     drawShape(cfg, group) {
      //       const rect = group.addShape('rect', {
      //         attrs: {
      //           x: -75,
      //           y: -25,
      //           width: 150,
      //           height: 50,
      //           radius: 10,
      //           stroke: '#f00',
      //           fill: '#C6E5FF',
      //           lineWidth: 3,
      //         },
      //         name: 'rect-shape',
      //       });
      //       if (cfg.name) {
      //         group.addShape('text', {
      //           attrs: {
      //             text: cfg.name + cfg.id,
      //             x: 0,
      //             y: 0,
      //             fill: '#00287E',
      //             fontSize: 14,
      //             textAlign: 'center',
      //             textBaseline: 'middle',
      //             fontWeight: 'bold',
      //           },
      //           name: 'text-shape',
      //         });
      //       }
      //       return rect;
      //     },
      //   },
      //   'single-node',
      // );



      that.G6.registerNode('card-node', {
        draw: (cfg, group) => {
          const config = getNodeConfig(cfg);
          const isRoot = cfg.dataType === 'root';
          const nodeError = cfg.nodeError;
          /* the biggest rect */
          const container = nodeBasicMethod.createNodeBox(group, config, 243, 64, isRoot);

          if (cfg.dataType !== 'root') {
            /* the type text */
            group.addShape('text', {
              attrs: {
                text: cfg.dataType,
                x: 3,
                y: -10,
                fontSize: 12,
                textAlign: 'left',
                textBaseline: 'middle',
                fill: 'rgba(0,0,0,0.65)',
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'type-text-shape',
            });
          }

          if (cfg.ip) {
            /* ip start */
            /* ipBox */
            const ipRect = group.addShape('rect', {
              attrs: {
                fill: nodeError ? null : '#FFF',
                stroke: nodeError ? 'rgba(255,255,255,0.65)' : null,
                radius: 2,
                cursor: 'pointer',
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'ip-container-shape',
            });

            /* ip */
            const ipText = group.addShape('text', {
              attrs: {
                text: cfg.ip,
                x: 0,
                y: 19,
                fontSize: 12,
                textAlign: 'left',
                textBaseline: 'middle',
                fill: nodeError ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.65)',
                cursor: 'pointer',
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'ip-text-shape',
            });

            const ipBBox = ipText.getBBox();
            /* the distance from the IP to the right is 12px */
            ipText.attr({
              x: 224 - 12 - ipBBox.width,
            });
            /* ipBox */
            ipRect.attr({
              x: 224 - 12 - ipBBox.width - 4,
              y: ipBBox.minY - 5,
              width: ipBBox.width + 8,
              height: ipBBox.height + 10,
            });

            /* a transparent shape on the IP for click listener */
            group.addShape('rect', {
              attrs: {
                stroke: '',
                cursor: 'pointer',
                x: 224 - 12 - ipBBox.width - 4,
                y: ipBBox.minY - 5,
                width: ipBBox.width + 8,
                height: ipBBox.height + 10,
                fill: '#fff',
                opacity: 0,
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'ip-box',
            });

            /* copyIpLine */
            group.addShape('rect', {
              attrs: {
                x: 194,
                y: 7,
                width: 1,
                height: 24,
                fill: '#E3E6E8',
                opacity: 0,
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'ip-cp-line',
            });
            /* copyIpBG */
            group.addShape('rect', {
              attrs: {
                x: 195,
                y: 8,
                width: 22,
                height: 22,
                fill: '#FFF',
                cursor: 'pointer',
                opacity: 0,
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'ip-cp-bg',
            });
            /* copyIpIcon */
            group.addShape('image', {
              attrs: {
                x: 200,
                y: 13,
                height: 12,
                width: 10,
                img: 'https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png',
                cursor: 'pointer',
                opacity: 0,
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'ip-cp-icon',
            });
            /* a transparent rect on the icon area for click listener */
            group.addShape('rect', {
              attrs: {
                x: 195,
                y: 8,
                width: 22,
                height: 22,
                fill: '#FFF',
                cursor: 'pointer',
                opacity: 0,
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'ip-cp-box',
              tooltip: 'Copy the IP',
            });

            /* ip end */
          }

          /* name */
          group.addShape('text', {
            attrs: {
              text: cfg.name,
              x: 19,
              y: 19,
              fontSize: 14,
              fontWeight: 700,
              textAlign: 'left',
              textBaseline: 'middle',
              fill: config.fontColor,
              cursor: 'pointer',
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: 'name-text-shape',
          });

          /* the description text */
          group.addShape('text', {
            attrs: {
              text: cfg.keyInfo,
              x: 19,
              y: 45,
              fontSize: 14,
              textAlign: 'left',
              textBaseline: 'middle',
              fill: config.fontColor,
              cursor: 'pointer',
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: 'bottom-text-shape',
          });

          if (nodeError) {
            group.addShape('text', {
              attrs: {
                x: 191,
                y: 62,
                text: '⚠️',
                fill: '#000',
                fontSize: 18,
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'error-text-shape',
            });
          }

          const hasChildren = cfg.children && cfg.children.length > 0;
          if (hasChildren) {
            nodeBasicMethod.createNodeMarker(group, cfg.collapsed, 236, 32);
          }
          return container;
        },
        afterDraw: nodeBasicMethod.afterDraw,
        setState: nodeBasicMethod.setState,
      });


      const container = document.getElementById('container');
      const width = container.scrollWidth;
      const height = container.scrollHeight;
      const graph = new that.G6.Graph({
        container: 'container',
        width,
        height,
        layout: {
          type: 'dagre',
          nodesepFunc: (d) => {
            if (d.id === '3') {
              return 500;
            }
            return 50;
          },
          ranksep: 20,//高度
          controlPoints: true,
        },
        defaultNode: {
          type: 'sql',
        },
        defaultEdge: {
          type: 'polyline',
          style: {
            radius: 20,
            offset: 45,
            endArrow: true,
            lineWidth: 2,
            stroke: '#C2C8D5',
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: '#d9d9d9',
            fill: '#5394ef',
          },
        },
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas',
            'click-select',
            {
              type: 'tooltip',
              formatText(model) {
                console.log(model)
                return '文字描述';
              },
              offset: 30,
            },
          ],
        },
        fitView: true,
      });
      // graph.data(data);
      graph.data(wzData);
      graph.render();

      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">

</style>
